// component/com/com.js

// 1. 按需导入容器成员
// 2. 在组件的behaviors节点 实现自动绑定
// 3. 在storeBindings节点指定要绑定的store和要绑定的数据以及方法
// 【组件使用时调用的方法】
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store.js'

Component({
  // 通过storeBindingsBehavior 来实现自动绑定
  // 把store中的数据【混入】到【组件】中
  behaviors: [storeBindingsBehavior],

  // 把store中的数据【映射】到【组件】中
  storeBindings: {
    //  通过storeBindingsBehavior 来实现自动绑定(类似映射容器的实例)
    store,
    //  指定要绑定的数据字段或计算属性(类似映射容器中的属性（数据字段）)
    fields: {
      numA: () => store.numA,  // 绑定字段的方式1：
      numB: store => store.numB, // 绑定字段的方式2
      sum: 'sum'    // 绑定字段的方式3
    },

    // 【注意】： fields中前面是在组件中的名称，可自定义，后面是容器中的名称，必须和仓库一致
    
    //  指定要绑定的方法(类似映射容器中的方法)
    actions: {
      updateNum1: 'updateNum1',
      updateNum2: 'updateNum2',
    }

    // 【结论】: 无论是在页面中使用仓库中的东西, 还是在组件中使用仓库中的东西, 在绑定成功之后, 就可以像使用自身数据和调用自身方法一样的对仓库的数据和方法进行操作
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  lifetimes: {
    attached() {
      console.log(this, 7777);
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})
